<template>
    <div class="app-container" id="car"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            carData: [],
            queryInfo: {
                parkname: "A",
                currPage: 0,
                pageNum: 4,
            },

            carDataB: [],
            queryInfoB: {
                parkname: "B",
                currPage: 0,
                pageNum: 4,
            },

            carDataC: [],
            queryInfoC: {
                parkname: "C",
                currPage: 0,
                pageNum: 4,
            },

            carDataD: [],
            queryInfoD: {
                parkname: "D",
                currPage: 0,
                pageNum: 4,
            },
            // ---------------------------------------------
            carDataA1: [],
            queryInfoA1: {
                parkname: "A",
                currPage: 0,
                pageNum: 4,
                parkstatus: 1,
            },

            carDataB1: [],
            queryInfoB1: {
                parkname: "B",
                currPage: 0,
                pageNum: 4,
                parkstatus: 1,
            },

            carDataC1: [],
            queryInfoC1: {
                parkname: "C",
                currPage: 0,
                pageNum: 4,
                parkstatus: 1,
            },

            carDataD1: [],
            queryInfoD1: {
                parkname: "D",
                currPage: 0,
                pageNum: 4,
                parkstatus: 1,
            },
        };
    },
    mounted() {
        this.getEchartsData();
    },
    methods: {
        async getEchartsData() {
            // A
            let res = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfo,
            });
            this.carData = res.data.total;

            //A1
            let resA1 = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoA1,
            });
            this.carDataA1 = resA1.data.total;

            //B
            let resB = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoB,
            });
            this.carDataB = resB.data.total;

            //B1
            let resB1 = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoB1,
            });
            this.carDataB1 = resB1.data.total;

            //C
            let resC = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoC,
            });
            this.carDataC = resC.data.total;

            //C1
            let resC1 = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoC1,
            });
            this.carDataC1 = resC1.data.total;

            //D
            let resD = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoD,
            });
            this.carDataD = resD.data.total;

            //C1
            let resD1 = await this.$axios({
                url: "/parking/getParkData",
                methods: "get",
                params: this.queryInfoD1,
            });
            this.carDataD1 = resD1.data.total;
            this.echartsInit();
        },
        echartsInit() {
            echarts.init(document.getElementById("car")).setOption({
                color: ['#5470C6', '#91CC75', '#DDB7FA'],
                title: {
                    text: "车位数/已分配量/已缴费",
                    left: "left",
                    textStyle: {
                        fontSize: 14,
                    },
                },
                legend: {
                    // 图例
                    show: true, // 显示图例
                    orient: "horizontal", // 图例排列方式
                    data: ["车位数", "已分配量", "已缴费"],
                    left: "50%",
                    top: "3%",
                },
                tooltip: {
                    trigger: "item",
                    textStyle: {
                        color: "#fff",
                        fontSize: "12",
                    },
                    backgroundColor: "rgba(32,33,36,7)",
                    borderWidth: 1,
                },
                dataset: {
                    source: [
                        ["product", "车位数", "已分配量", "已缴费"],
                        ["A区车位", this.carData, this.carDataA1, 0],
                        ["B区车位", this.carDataB, this.carDataB1, 0],
                        ["C区车位", this.carDataC, this.carDataC1, 0],
                        ["D区车位", this.carDataD, this.carDataD1, 0],
                    ],
                },
                xAxis: [
                    {
                        type: "category",
                    },
                ],
                yAxis: {},
                series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
                label: {
                    show: true,
                    position: "top",
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.app-container::v-deep {
    width: 100%;
    height: 100%;
}
</style>
